<template>
<div>
  <!-- 子表单区域 -->
  <a-tabs value="activeKey">

    <a-tab-pane tab="选择流程" key="activeKey" :forceRender="true">
      <!-- table区域-begin -->
      <a-table
        :scroll="{ x: 1500, y: 180 }"
        bordered
        ref="activeKey"
        size="middle"
        rowKey="id"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
        :customRow="onClickRow"
        @change="handleTableChange">

        <a-table-column title="序号" :width="70" align="center" fixed='left' key="a">
          <template slot-scope="t,r,i">
            <span> {{(ipagination.current - 1) * ipagination.pageSize + i + 1}} </span>
          </template>
        </a-table-column>
        <a-table-column title="流程名称" dataIndex="name" :width="200" align="center" fixed='left'>
          <template slot-scope="t,r,i">
            <span> {{ t }} </span>
          </template>
        </a-table-column>
        <!--          <a-table-column title="流程标识" dataIndex="processKey" align="center">-->
        <!--            <template slot-scope="t,r,i">-->
        <!--              <span> {{ t }} </span>-->
        <!--            </template>-->
        <!--          </a-table-column>-->
        <!--      <a-table-column title="所属分类" dataIndex="categoryId" align="center" key="categoryId_"-->
        <!--                      :filters = "lcTypeF" @filter="filter_categoryId">-->
        <!--        <template slot-scope="t,r,i">-->
        <!--          <span> {{filterDictText(dictOptions, t)}} </span>-->
        <!--        </template>-->
        <!--      </a-table-column>-->
        <a-table-column title="流程图片" dataIndex="diagramName" align="center">
          <template slot-scope="t,r,i">
            <span @click="showResource(r)" style="color: blue;cursor: pointer;">{{ t }}</span>
          </template>
        </a-table-column>

        <!--          <a-table-column title="状态" dataIndex="status" :width="100" align="center">-->
        <!--            <template slot-scope="t,r,i">-->
        <!--              <span v-if="t==1" style="color: #00A0E9;"> 已启用 </span>-->
        <!--              <span v-if="t!=1" style="color: #999;"> 未启用 </span>-->
        <!--            </template>-->
        <!--          </a-table-column>-->

        <a-table-column title="版本" dataIndex="version" key="asa" :width="100" align="center"
                        :sorter="(a, b) => a.version - b.version">
          <template slot-scope="t,r,i">
            <span> v.{{ t }} </span>
          </template>
        </a-table-column>

        <a-table-column title="备注说明" dataIndex="description" align="center">
          <template slot-scope="t,r,i">
            <span> {{ t }} </span>
          </template>
        </a-table-column>

      </a-table>
      <!-- table区域-end -->
    </a-tab-pane>
  </a-tabs>


  <!--查看图片-->
  <a-modal
    :title="viewTitle"
    width="70%"
    :visible="viewImage"
    :footer="null"
    @cancel="viewImage = false">
    <div style="min-height: 400px">
      <img :src="diagramUrl" :alt="viewTitle">
    </div>
  </a-modal>
</div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { ActivitiFormMixin } from '@/views/activiti/mixins/activitiFormMixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@api/manage'
import { filterObj } from '@/utils/util'

export default {
  name: 'BaseForm',
  mixins: [JeecgListMixin, ActivitiFormMixin],
  components: {
  },
  data () {
    return {
      // form
      viewImage: false,
      disableMixinCreated: true,
      viewTitle: '',
      diagramUrl: '',
      url: {
        img: '/activiti/models/export',
        list: '/activiti_process/listData'
      }
    }
  },
  created () {

  },
  methods: {
    /*查看流程图片*/
    showResource (row) {
      this.viewTitle = '流程图片预览(' + row.diagramName + ')'
      this.diagramUrl = `${window._CONFIG['domianURL']}${this.url.img}?id=${row.id}`
      this.viewImage = true
    },

    onClickRow (record) {
      return {
        on: {
          click: () => {

            let keys = []
            keys.push(record.id)
            this.selectedRowKeys = keys
          }
        }
      }
    },

    handleTableChange (pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      console.log(pagination, filters, sorter)
      /*if (Object.keys(filters).length>0&&this.dataList.length>0){
        for (const filterField in filters) {
          let fiterVals = filters[filterField]||[];

        }
      }*/
      // this.loadData();
    },
    loadData (arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let params = this.getQueryParams()//查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        console.log(res)
        if (res.success) {
          let records = res.result || []
          this.dataSource = records
          this.dataList = records
          this.ipagination.total = records.length
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getQueryParams () {
      let param = Object.assign({}, this.queryParam, this.isorter)
      delete param.createTimeRange // 时间参数不传递后台
      return filterObj(param)
    }
  }
}
</script>

<!--lang="less"-->
<style lang="less" scoped>
@import '~@assets/less/common.less';

.ant-form-item {
  margin-bottom: 10px;
}

.ant-col {
  min-height: 51px !important;
}

/*.ant-form-item span {*/
/*  position: absolute !important;*/
/*  min-height: 20px !important;*/
/*}*/
</style>